<template>
<view class="fun-main-container">
	<view class="single-fun-view" v-for="menu in menuList" :key="menu.id">
		<view :class="'single-btn '+menu.clsName" :style="{color:menu.color?menu.color:''}" @click="onMenuClick(menu)">
			<view :class="'iconfont '+menu.icon"></view>
			<view class="title">{{menu.name}}</view>
		</view>
	</view>
	
	<!-- <view class="single-fun-view" v-if="hasAuth(['boss', 'worker'])">
		<view class="single-btn dark-green2" @click="onFunClick('add-customer')">
			<view class="iconfont icon-tianjiarenyuan"></view>
			<view class="title">新建顾客</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss', 'worker'])">
		<view class="single-btn dark-blue2" @click="onFunClick('customer')">
			<view class="iconfont icon-geshuishezhi"></view>
			<view class="title">顾客管理</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-purple2" @click="onFunClick('product')">
			<view class="iconfont icon-reg"></view>
			<view class="title">产品项目</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-blue" @click="onFunClick('times')">
			<view class="iconfont icon-cika"></view>
			<view class="title">次数卡配置</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-green" @click="onFunClick('percent')">
			<view class="iconfont icon-zhekoukaguanli"></view>
			<view class="title">折扣卡配置</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-orange" @click="onFunClick('surplus')">
			<view class="iconfont icon-caiwu"></view>
			<view class="title">储值卡配置</view>
		</view>
	</view>
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-purple" @click="onFunClick('worker')">
			<view class="iconfont icon-kefu1"></view>
			<view class="title">员工管理</view>
		</view>
	</view> -->
	<view class="single-fun-view" v-if="hasAuth(['boss'])">
		<view class="single-btn dark-red" @click="onFunClick('delete')">
			<view class="iconfont icon-minus-circle"></view>
			<view class="title">注销店铺</view>
		</view>
	</view>
	
	<auto-modal :show="deleteVisiable" @onOpt="onDeleteOpt" @onClose="deleteVisiable=false" title="注销提醒" cancelText="确定注销" okText="误操作,不注销">
		<view class="red">注销功能谨慎使用！</view>
		<view style="line-height: 1.7; color:#333">注销成功后与本店铺相关的所有数据将全部被清空且无法找回！</view>
	</auto-modal>
</view>
</template>

<script>
export default {
	data() {
		return {
			deleteVisiable: false,
			menuList: this.$auth.getAuthMenu()
		}
	},
	props: {
		/* menuList: {
			type: Array, default: function() {return [];}
		}, */
		isBoss: {
			type: Boolean, default: false,
		},
		isWorker: {
			type: Boolean, default: false,
		},
		curRole: {
			type: String, default: ''
		}
	},
	methods: {
		onMenuClick: function(menu) {
			// console.log(menu)
			const navType = menu.navigateType;
			const url = menu.url;
			if(navType==='switch') {
				uni.switchTab({
					url: url
				})
			} else if(navType === 'redirect') {
				uni.redirectTo({
					url: url
				})
			} else if(navType==='reLaunch') {
				uni.reLaunch({
					url: url
				})
			} else {
				uni.navigateTo({
					url: url
				})
			}
		},
		onFunClick: function(flag) {
			switch(flag) {
				case 'times':
					this.gotoPage("/pages/card/times");
					break;
				case 'percent':
					this.gotoPage("/pages/card/percent"); break;
				case 'surplus':
					this.gotoPage("/pages/card/surplus"); break;
				case 'worker':
					this.gotoPage("/pages/worker/list"); break;
				case 'delete':
					this.deleteVisiable = true; break;
				case 'add-customer':
					this.gotoPage("/pages/customer/add"); break;
				case 'customer':
					this.gotoPage("/pages/customer/list"); break;
				case 'product':
					this.gotoPage("/pages/product/list"); break;
				default:
					this.$common.showNormalToast("此功能开发中")
			}
		},
		gotoPage: function(url) {
			uni.navigateTo({
				url: url
			})
		},
		onDeleteOpt: function(flag) {
			if(flag==='cancel') {
				this.$emit("onDelete");
			} 
			this.deleteVisiable = false;
		},
		hasAuth: function(array) {
			return array && array.length>0 && array.indexOf(this.curRole)>=0
		}
	}
}
</script>

<style lang="scss">
.fun-main-container {
	width: 100%;
	.single-fun-view {
		display: inline-block;
		width: 33.33%; text-align: center;
		margin: 20rpx 0px; border-bottom: 1px #ddd solid;
		
		.single-btn {
			padding: 20rpx; 
			
			.iconfont {
				font-size: 220%;
			}
			.title {
				font-size: 28rpx; margin-top: 20rpx;
			}
		}
	}
}
</style>
